<template>
  <div id="app">
    <div style="width:700px;margin:0 auto;font-size:30px">
      <el-card style="width:800px;margin-bottom:10px">
        总价格：<div style="display:inline-block;color:red">{{total}} 元</div>
      </el-card>
      <ShopCard ref="shopRef" @numChange="getValue" style="margin-bottom:10px" :value="item" v-for="item in list" :key="item.id"></ShopCard>
    </div>
  </div>
</template>
<script>
import ShopCard from '@/components/ShopCard'
// import {getListApi} from '@/api/staticApi.js'
export default {
  name:'App',
  data() {
    return {
      list:[],
      total:0,
    }
  },
  components:{
    ShopCard
  },
  created() {
    this.getList()
  },

  methods: {
    getValue(){
      let num = 0
      this.$refs.shopRef.forEach(element => {
        num += element.totalPriceEve
      });
      this.total = num
    },
    async getList(){
      let {data:res} = await this.$http.get('/api/goods')
      console.log(res);
      this.list = res.list
    },

  },
}
</script>
